<template>
    <div class="update-name">
        <van-nav-bar
            title="设置昵称"
            left-text="取消"
            right-text="确定"
            @click-left="$emit('close')"
            @click-right="onConfirm"
        />
        <van-field
            v-model="localName"
            rows="2"
            autosize
            type="textarea"
            maxlength="7"
            placeholder="请输入昵称"
            show-word-limit
        />
    </div>
</template>
<script>
import { showFailToast, showLoadingToast, showSuccessToast } from 'vant';
import { updateUserProfile } from '@/apis/user'
export default {
    name:'UpdateName',
    props: {
        name: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            localName:this.name
        }
    },
    methods: {
        async onConfirm() {
            if (this.localName.trim().length<=0) {
                return showFailToast('请输入昵称')
            }
            showLoadingToast('正在修改...')
            try {
                await updateUserProfile({
                    name:this.localName
                })
                this.$emit('change-confirm',this.localName)
                this.$emit('close')
                showSuccessToast('修改成功')
            } catch (error) {
                showFailToast('修改失败')
            }
            
        }
    }
    
}
</script>
<style lang="less" scoped>
    
</style>